<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户管理</title>
		<link rel="stylesheet" href="/static/admin/component/pear/css/pear.css" />
	</head>
	<body class="pear-container">
		<div class="layui-card">
			<div class="layui-card-body">
				<table id="dataTable" lay-filter="dataTable"></table>
			</div>
		</div>

		<script type="text/html" id="toolbar">
			<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
		        <i class="layui-icon layui-icon-add-1"></i>
		        新增
            </button>
		</script>
		
		<script type="text/html" id="user-createTime">
			{{layui.util.toDateString(d.create_time*1000, 'yyyy-MM-dd')}}
		</script>
		<script type="text/html" id="user-updateTime">
			{{layui.util.toDateString(d.update_time*1000, 'yyyy-MM-dd')}}
		</script>

		<script type="text/html" id="options">
			<button class="pear-btn pear-btn-primary pear-btn-xs" lay-event="edit">修改</button>
			<button class="pear-btn pear-btn-warming pear-btn-xs" lay-event="menu">权限</button>
		    <button class="pear-btn pear-btn-danger pear-btn-xs" lay-event="remove">删除</button>
		</script>

		{include file="inc/pear" /}
	</body>
</html>
<script>
layui.use(['table', 'form', 'jquery'], function() {
    let  table = layui.table;
    let  form = layui.form;
    let  $ = layui.jquery;
    let  cols = [
        [
             {
                field: 'name',
                title: '角色名称',
                unresize: true,
                align: 'center'
            }, {
                field: 'intro',
                title: '描述',
                unresize: true,
                align: 'center',
            },
            {
				field: 'create_time',
				title: '创建时间',
				unresize: true,
				templet: '#user-createTime',
				align: 'center'

			},
			{
				field: 'update_time',
				title: '更新时间',
				unresize: true,
				templet: '#user-updateTime',
				align: 'center'
			},
            {
                title: '操作',
                toolbar: '#options',
                align: 'center',
                unresize: true,
                width: '15%'
            }
        ]
    ]

    table.render({
        elem: '#dataTable',
        url: 'index',
        page: true,
        cols: cols,
        skin: 'line',
        toolbar: '#toolbar',
        done: function(res,curr,count) {
            //定义验证
            let  validate = ['',null,0,undefined,'NAN',[]];
            var that = this.elem.next();
            var data = res.data;
            if (data) {
                data.forEach((item,index) => {
                    var colorId = localStorage.getItem("theme-color")
                    if (index % 2 == 0) {
                        tr = that.find('.layui-table-box tbody tr[data-index='+ index +']').css('background-color',colourDeal(colorId));
                    } else {
                        tr = that.find('.layui-table-box tbody tr[data-index='+ index +']').css('background-color');
                    }
                });
            }
            //判断表格中是否存在数据
            if ( (validate.indexOf(data) >= 0) && curr != 1 ) {
                var cr = curr > 1 ? ((curr * 1) - 1) : 1;
                //重载
                table.reload('dataTable',{
                    page : {
                        curr : cr
                    }
                });
            }
        },
        defaultToolbar: [{
            layEvent: 'refresh',
            icon: 'layui-icon-refresh',
        }, 'filter']
    });

    table.on('tool(dataTable)', function(obj) {
        if (obj.event === 'remove') {
            window.remove(obj);
        } else if (obj.event === 'edit') {
            window.edit(obj);
        }else if (obj.event === 'menu') {
            window.menu(obj);
        }
    });

    table.on('toolbar(dataTable)', function(obj) {
        if (obj.event === 'add') {
            window.add();
        } else if (obj.event === 'refresh') {
            window.refresh();
        }else if (obj.event === 'recycle') {
            window.recycle(obj);
        }
    });
    if (typeof width !== 'number' || width === 0) {
        width = $(window).width() * 0.8;
    }
    if (typeof height !== 'number' || height === 0) {
        height = $(window).height() - 20;
    }
    window.add = function() {
        layer.open({
            type: 2,
            maxmin: true,
            title: '新增角色',
            shade: 0.1,
            area: [width + 'px', height + 'px'],
            content:'add'
        });
    }

    window.edit = function(obj) {
        layer.open({
            type: 2,
            maxmin: true,
            title: '修改角色',
            shade: 0.1,
            area: [width + 'px', height + 'px'],
            content:'edit?id='+obj.data['id']
        });
    }

    window.menu = function(obj) {
        layer.open({
            type: 2,
            maxmin: true,
            title: '分配直接权限',
            shade: 0.1,
            area: [width + 'px', height + 'px'],
            content:'menus?id='+obj.data['id']
        });
    }

    window.remove = function(obj) {
        layer.confirm('确定要删除该角色', {
            icon: 3,
            title: '提示'
        }, function(index) {
            layer.close(index);
            let  loading = layer.load();
            $.ajax({
                url:'del',
                data:{id:obj.data['id']},
                dataType: 'json',
                type: 'POST',
                success: function(res) {
                    layer.close(loading);
                    //判断有没有权限
                    if(res && res.code==999){
                        layer.msg(res.msg, {
                            icon: 5,
                            time: 2000,
                        })
                        return false;
                    }else if (res.code==200) {
                        layer.msg(res.msg, {
                            icon: 1,
                            time: 1000
                        }, function() {
                            table.reload('dataTable');
                        });
                    } else {
                        layer.msg(res.msg, {
                            icon: 2,
                            time: 1000
                        });
                    }
                }
            })
        });
    }

    window.recycle = function() {
        layer.open({
            type: 2,
            maxmin: true,
            title: '回收站',
            shade: 0.1,
            area: [width + 'px', height + 'px'],
            content:'recycle',
            cancel: function () {
                table.reload('dataTable');
            }
        });
    }

    window.refresh = function() {
        table.reload('dataTable');
    }
})
</script>